/* eslint-disable */
// import axios from 'axios'
export default {
  data() {
    return {
      //用户列表数据
      usersData: [
        {
          username: '王小虎',
          email: '20160502@qq.com',
          mobile: '1231231231'
        }
      ],
      // 开关的值
      value3: true,
      // 总个数
      total: 0,
      // 当前页数
      pagenum: 1,
      // 搜索文本
      searchText: '',
      // 添加用户对话框是否可见
      dialogAddUserVisible: false,
      // 添加用户对话框里的表单对象
      addUserForm: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      },
      // 校验规则
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }
        ],
        email: [
          {
            pattern: /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/,
            message: '格式不正确',
            trigger: 'blur'
          }
        ],
        mobile: [
          {
            pattern: /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/,
            message: '手机格式不正确',
            trigger: 'blur'
          }
        ]
      },
      // 编辑用户对话框是否可见
      dialogEditUserVisible: false,
      // 编辑用户表单对象
      editUserForm: {
        id: 0,
        username: '张三',
        email: '',
        mobile: ''
      },
      // -----------------下面是分配角色部分 -----
      // 是否显示分配角色对话框
      dialogAssignRoleVisible: false,
      // 分配角色对象
      assignRoleForm: {
        // 用户名
        username: '测试',
        // 角色id
        rid: '',
        // 当前用户id
        id: 0
      },
      // 角色列表数据
      rolesList: []
    }
  },

  created() {
    this.loadUsersData()
    this.loadRoleList()
  },

  methods: {
    // 加载用户数据
    async loadUsersData(pagenum = 1, query = '') {
      // 准备
      // let url = 'http://localhost:8888/api/private/v1/users'
      let url = 'users'
      let options = {
        params: {
          query,
          pagenum,
          pagesize: 2
        }
        // ,
        // headers: {
        //   Authorization: localStorage.getItem('token')
        // }
      }

      // 请求
      let res = await this.$axios.get(url, options)
      // 赋值用户列表数据
      this.usersData = res.data.data.users
      // 总个数
      this.total = res.data.data.total
      // 当前页
      this.pagenum = res.data.data.pagenum

      // axios
      //   .get('http://localhost:8888/api/private/v1/users', {
      //     params: {
      //       query,
      //       pagenum,
      //       pagesize: 2
      //     },
      //     headers: {
      //       Authorization: localStorage.getItem('token')
      //     }
      //   })
      //   .then(res => {
      //     console.log(res)
      // // 赋值用户列表数据
      // this.usersData = res.data.data.users
      // // 总个数
      // this.total = res.data.data.total
      // // 当前页
      // this.pagenum = res.data.data.pagenum
      //   })
    },
    // 点击改变页数
    changeCurPage(curPage) {
      console.log('改变了', curPage) // 1 2 3
      this.loadUsersData(curPage, this.searchText)
    },
    // 点击开始查询
    startQuery() {
      console.log(this.searchText)
      // 查询 n 的第一页
      this.loadUsersData(1, this.searchText)
    },
    // 展示添加用户对话框
    showAddUserDialog() {
      this.dialogAddUserVisible = true
    },
    // 添加用户
    async addUser() {
      //1. 发送请求
      let res = await this.$axios.post('users', this.addUserForm)
      console.log(res)
      //2. 判断
      if (res.data.meta.status === 201) {
        //3. 对话框隐藏
        this.dialogAddUserVisible = false

        //4. 刷新当前页面
        this.loadUsersData()

        //5. 提示
        this.$message({
          message: '添加用户成功',
          type: 'success',
          duration: 800
        })
      } else {
        this.$message({
          message: '添加用户失败',
          type: 'error',
          duration: 800
        })
      }
    },
    // 监听对话框关闭
    dialogClosed() {
      console.log('对话框关闭了')
      // 重置表单内容
      // refs => 获取DOM / 组件
      this.$refs.addUserRef.resetFields()
    },
    // 删除任务
    async delUser(id) {
      //1. 给一个确认框
      try {
        await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })

        let res = await this.$axios.delete(`users/${id}`)
        // let res = await this.$axios.delete(`users/${id}`, {
        //   headers: {
        //     Authorization: localStorage.getItem('token')
        //   }
        // })
        console.log(res)
        if (res.data.meta.status === 200) {
          //1. 提示
          this.$message({
            message: '删除成功',
            type: 'success',
            duration: 800
          })
          //2. 刷新页面
          this.loadUsersData()
        }
      } catch (error) {
        this.$message({
          message: '取消删除',
          type: 'info',
          duration: 800
        })
      }
    },
    // 状态改变
    async stateChanged(row) {
      // console.log(row)
      // let id = row.id
      // let mgState = row.mg_state

      const { id, mg_state: mgState } = row

      let res = await this.$axios.put(`users/${id}/state/${mgState}`)
      console.log(res)
      if (res.data.meta.status === 200) {
        this.$message({
          message: '状态修改成功',
          type: 'success',
          duration: 800
        })
      }
    },
    // 显示编辑用户对话框
    showEditUserDialog(row) {
      // console.log(row)
      // this.editUserForm.id = row.id
      // this.editUserForm.username = row.username
      // this.editUserForm.mobile = row.mobile
      // this.editUserForm.email = row.email

      const { id, username, mobile, email } = row
      this.editUserForm.id = id
      this.editUserForm.username = username
      this.editUserForm.mobile = mobile
      this.editUserForm.email = email

      this.dialogEditUserVisible = true
    },
    // 编辑用户
    async editUser() {
      const { id, email, mobile } = this.editUserForm

      let res = await this.$axios.put(`users/${id}`, {
        email,
        mobile
      })

      if (res.data.meta.status === 200) {
        //1. 对话框关闭
        this.dialogEditUserVisible = false
        //2. 提示
        this.$message({
          message: '更新用户成功',
          type: 'success',
          duration: 800
        })
        //3. 刷新页面
        // 如果不传,默认刷新第一页
        // 如果传当前页,就只会刷新当前页数据即可
        this.loadUsersData(this.pagenum)
      }
    },
    // 加载角色列表数据
    async loadRoleList() {
      let res = await this.$axios.get('roles')
      console.log(res)
      this.rolesList = res.data.data
    },
    // 展示分配角色对话框
    async showAssignRoleDialog(row) {
      console.log(row)

      //1. 获取row(当前用户 对象里面的数据)
      // 这里需要三个参数 : id(用户id) username rid(角色id)?
      // 以后获取一个未知参数 1-上下文传递  2-再次请求
      const { id, username } = row
      // 再次请请求获取rid
      let res = await this.$axios.get(`users/${id}`)
      let rid = res.data.data.rid
      console.log(id, username, rid)

      //2. 赋值给表单绑定的对象
      this.assignRoleForm.id = id
      this.assignRoleForm.username = username
      // -1 的意思是创建之后,从来没有分配角色过,
      this.assignRoleForm.rid = rid == -1 ? '' : rid

      this.dialogAssignRoleVisible = true
    },
    // 分配角色
    async assignRole() {
      // 获取需要的参数
      const { id, rid } = this.assignRoleForm
      let res = await this.$axios.put(`users/${id}/role`, {
        rid
      })
      console.log(res)
      if (res.data.meta.status === 200) {
        //1. 隐藏对话框
        this.dialogAssignRoleVisible = false
        //2. 提示
        this.$message({
          message: '分配角色成功',
          type: 'success',
          duration: 800
        })
        //3. 刷新
        this.loadUsersData(this.pagenum)
      }
    }
  }
}
